import { useReducer } from 'react';

export default function Reducer () {
  const reducer = (state: { count: number; }, action: { type: string; }) => {
    switch (action.type) {
      case 'add':
        return {
          count: state.count + 1
        };
      case 'minus':
        return {
          count: state.count - 1
        };
      default:
        return state;
    }
  }
  const initState = {
    count: -1
  }
  const initFn = (state: { count: number; }) => {
    return {
      count: Math.abs(state.count)
    }
  }
  const [count, dispatch] = useReducer(reducer, initState, initFn);

  return (
    <div>
      <h1>useReducer</h1>
      <div>count: {count.count}</div>
      <button onClick={() => dispatch({type: 'add'})}>Add</button>
      <button onClick={() => dispatch({type: 'minus'})}>Minus</button>
    </div>
  )
}